<template>
  <div class="shot">
    <div class="scroll">
      <div class="breadCrumb">Viewer -> <span>Search Shot</span></div>

      <el-tabs type="card" @tab-click="handleClick" class="tabs">
        <el-tab-pane label="Search Shot">
          <el-card class="container">
            <div class="header">
              <div class="title">Shot:{{ shotName }}</div>
              <div class="delete">×</div>
            </div>
            <div class="main">
              <div
                class="chartshow"
                v-for="(item, index) in chartList"
                :key="index"
              >
                <div
                  :class="'charts' + index"
                  style="width: 90%; height: 100%; border: 1px solid #333"
                ></div>
              </div>
            </div>
            <div class="footer">
              <div class="footer-left">
                <div
                  class="info"
                  v-for="(item, index) in infoList"
                  :key="index"
                >
                  <span class="infol">{{ item.name }}</span>
                  <span class="infor">{{ item.res }}</span>
                </div>
              </div>
              <div class="footer-right">
                <div class="radio">
                  <el-radio-group v-model="radio" label-width="auto">
                    <el-radio :label="1" style="width: 80px">room</el-radio>
                    <el-radio :label="2" style="width: 8 750px">Point</el-radio>
                    <el-radio :label="3">Pan</el-radio>
                  </el-radio-group>
                </div>
                <div class="button">
                  <el-button-group style="margin-top: 10px">
                    <el-button
                      style="
                        width: 100px;
                        background-color: #01cbcb;
                        color: #fff;
                        font-size: 16px;
                        margin-right: 10px;
                        border-radius: 8px;
                      "
                      >Prev</el-button
                    >
                    <el-button
                      style="
                        width: 100px;
                        background-color: #01cbcb;
                        color: #fff;
                        font-size: 16px;
                        margin-right: 10px;
                        border-radius: 8px;
                      "
                      >Next</el-button
                    >
                    <el-button
                      style="
                        width: 100px;
                        background-color: #01cbcb;
                        color: #fff;
                        font-size: 16px;
                        border-radius: 8px;
                      "
                      >Latest</el-button
                    >
                  </el-button-group>
                </div>
              </div>
            </div>
          </el-card></el-tab-pane
        >
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      mychartsList: [],
      shotName: "87075",
      radio: "",
      chartList: [
        {
          shotName: "87075",
          data: [150, 230, 224, 218, 135, 147, 260],
          name: "Shotnum:",
          res: "65403",
        },
        {
          shotName: "87075",
          data: [150, 230, 224, 218, 135, 147, 260],
          name: "Shotnum:",
          res: "65403",
        },
        {
          shotName: "87075",
          data: [150, 230, 224, 218, 135, 147, 260],
          name: "Shotnum:",
          res: "65403",
        },
        {
          shotName: "87075",
          data: [150, 230, 224, 218, 135, 147, 260],
          name: "Shotnum:",
          res: "65403",
        },
        {
          shotName: "87075",
          data: [150, 230, 224, 218, 135, 147, 260],
          name: "Shotnum:",
          res: "65403",
        },
        {
          shotName: "87075",
          data: [150, 230, 224, 218, 135, 147, 260],
          name: "Shotnum:",
          res: "65403",
        },
      ],
      infoList: [
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
        {
          name: "Shotnum:",
          res: "65403",
        },
      ],
      chart: {
        option1: {
          tooltip: {
            trigger: "axis",
            position: function (pt) {
              return [pt[0], "10%"];
            },
          },
          title: {
            left: "center",
            text: null,
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: "none",
              },
              restore: {},
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "time",
            boundaryGap: false,
          },
          yAxis: {
            type: "value",
            boundaryGap: [0, "100%"],
          },
          dataZoom: [
            {
              type: "inside",
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 100,
            },
          ],
          series: [
            {
              type: "line",
              smooth: "true",
              symbol: "none",
              areaStyle: {},
              data: null,
            },
          ],
        },
      },
    };
  },
  mounted() {
    this.chartDom();

    window.addEventListener("resize", this.load, false);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.load, false);
  },
  methods: {
    getMax() {
      let base = +new Date(2018, 9, 3);
      let oneDay = 24 * 3600;
      let data = [[base, Math.random() * 3]];
      for (let i = 1; i < 30000; i++) {
        let now = new Date((base += oneDay));
        let newD = Math.round((Math.random() - 0.5) * 2 + data[i - 1][1]);
        data.push([+now, newD]);
      }
      return data;
    },
    handleClick(e) {
      console.log(e);
    },
    chartDom() {
      this.$nextTick(() => {
        for (let i = 0; i < this.chartList.length; i++) {
          let chart = document.querySelector(`.charts${i}`);
          this.mycharts = echarts.init(chart);
          this.mychartsList.push(this.mycharts);
          this.chart.option1.series[0].data = this.getMax();
          this.chart.option1.title.text = `${this.chartList[i].name}${this.chartList[i].res}`;
          this.mycharts.setOption(this.chart.option1, true);
        }
      });
    },
    load() {
      this.mychartsList.forEach((e) => {
        e.dispose();
      });
      this.mychartsList.length = 0;
      this.chartDom();
    },
  },
};
</script>

<style lang="less" scoped>
.shot {
  width: 100%;
  min-width: 1200px;
  height: calc(100vh - 160px);

  .scroll {
    overflow-y: scroll; /* 设置溢出滚动 */
    white-space: nowrap;
    overflow-y: hidden;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    // background-color: #e9e9e9;
    .breadCrumb {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 20px;
      padding: 0 10px 10px;
      span {
        color: #238ae9;
      }
    }
    .tabs {
      /deep/ .el-tabs__nav.is-top {
        border: 1px solid #ccc;
        border-bottom: none;
      }
      .container {
        width: 100%;
        height: 100%;

        // padding: 10px;
        /deep/ .el-card__body {
          padding: 0;
        }
        .header {
          width: 100%;
          padding: 0 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #eee;
          .title {
            color: #b7b7b7;
            font-size: 16px;
          }
          .delete {
            font-size: 30px;
            color: #b7b7b7;
          }
        }
        .main {
          display: flex;
          width: 100%;
          height: 100%;
          flex-wrap: wrap;

          .chartshow {
            width: 48%;

            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 10px 0;
            margin: 8px;
            .chartitle {
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
        .footer {
          width: 100%;
          height: 100px;
          padding: 0px 20px;

          background-color: #cedfe5;
          border: 1px solid #a2d1ee;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .footer-left {
            width: 70%;
            flex-direction: row;
            display: flex;
            flex-wrap: wrap;
            .info {
              // background-color: aqua;
              font-size: 14px;
              padding: 10px;
              .infol {
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
}
</style>
